﻿<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="knockout-2.1.0.js" type="text/javascript"></script>
<style>
    /* TABLE
----------------------------------------------------------*/

    table {
        border: solid 1px #e8eef4;
        border-collapse: collapse;
    }

        table td {
            padding: 5px;
            border: solid 1px #e8eef4;
        }

        table th {
            padding: 6px 5px;
            text-align: left;
            background-color: #e8eef4;
            border: solid 1px #e8eef4;
        }
</style>
<h3>foreach模型遍历</h3>
<div id="foreach模型遍历">
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody data-bind="template:{name:'list',foreach: lines}">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <button data-bind='click: addLine'>Add</button></td>
            </tr>
        </tfoot>
    </table>
    <script type="text/html" id="list">
        <tr>
            <td><span data-bind="text:Id"></span></td>
            <td>
                <span data-bind="text: Name"></span>

            </td>
            <td>
                <span data-bind="text: PhoneNo"></span>

            </td>
            <td>
                <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
            </td>
        </tr>
    </script>
    <script type="text/javascript">

        var CartLine = function () {
            var self = this;
            self.Id = ko.observable();
            self.Name = ko.observable();
            self.PhoneNo = ko.observable(135);
            self.EmailAddress = ko.observable("@");
        };

        $.getJSON("http://localhost:7543/api/values/", function (data) {
            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                //self.lines = ko.observableArray([new CartLine()]);
                self.lines = ko.observableArray(data);
                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
            }
            ko.applyBindings(new Cart());
        });

    </script>
</div>

<div id="添加post请求">
</div>
